<!-- 公共材料定义：蹇泽阳 -->
<template>
  <div class="app-container">
    <JFind :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findClicked" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px 10px 5px' }">
      <div style="display: flex">
        <div>
          <h1>正式材料明细</h1>
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :isLoading="isLoading"
            :getTableList="getTableList"
            @confirmChange="confirmChange"
            @checkboxChange="checkboxChange"
          />
        </div>
      </div>
    </el-card>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import Synchronization from '@/utils/Synchronization'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import SynchronizationLoginWork from '@/utils/SynchronizationLoginWork'
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
export default defineComponent({
  name: 'PublicMaterialDefinition'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '分类名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称1',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '公用材料',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '非公用材料',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const tableHeader = ref([
  {
    change: true,
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    change: true,
    label: '分类名称',
    prop: 'typeName'
  },
  {
    change: true,
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    change: true,
    label: '材料名称',
    prop: 'mtlName',
    width: 190
  },
  {
    change: true,
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    change: true,
    label: '单位',
    prop: 'mtlUnit',
    width: 50
  },
  {
    change: true,
    label: '供应商',
    prop: 'vendor'
  },
  {
    change: true,
    label: '建档人员',
    prop: 'sysUser'
  },
  {
    label: '安全库存量',
    prop: 'safetyQty'
  },
  {
    label: '公用',
    type: 'checkbox',
    prop: 'publicFlag',
    width: 50
  }
])
// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList1.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList1.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '公用材料')
  const Audited = formList1.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '非公用材料')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '0'
  } else if (Audited.checked) {
    return '1'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/common/getPublicMaterials', {
    mtlColor: formList1.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    mtlName: formList1.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称1'
    )?.inputValue,
    mtlName1: formList1.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称2'
    )?.inputValue,
    mtlName2: formList1.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称3'
    )?.inputValue,
    typeName: formList1.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入分类名称'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    publicFlag: cfmFlag() //	有无欠数(Y/N)	string	body	true
  })
  isLoading.value = false
  tableData.value = tableDataList.materialQueryList.map((item: any) => {
    item.publicFlag === 'Y' ? (item.publicFlag = true) : (item.publicFlag = false)
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.total
}, 500)
onMounted(() => {
  getTableList()
})
watch(formList1.value, () => {
  getTableList()
})

// 修改后点击确定按钮
const confirmChange = async (row: any, fn: any) => {
  const copyRow = JSON.parse(JSON.stringify(row))
  copyRow.publicFlag === true ? (copyRow.publicFlag = '0') : (copyRow.publicFlag = '1')
  let res = await SynchronizationLoginWork.put<any, any>('/common/getPublicMaterialsUpdate', {
    mtlNo: copyRow.mtlNo,
    publicFlag: copyRow.publicFlag,
    safetyQty: copyRow.safetyQty
  })
  fn()
  if (res.code === 200) {
    JMessage.success('修改成功')
  }
}
// 修改公用
const checkboxChange = async (prop: any, row: any) => {
  const copyRow = JSON.parse(JSON.stringify(row))
  copyRow.publicFlag === true ? (copyRow.publicFlag = '0') : (copyRow.publicFlag = '1')
  let res = await SynchronizationLoginWork.put<any, any>('/common/getPublicMaterialsUpdate', {
    mtlNo: copyRow.mtlNo,
    publicFlag: copyRow.publicFlag,
    safetyQty: copyRow.safetyQty
  })
  if (res.code === 200) {
    JMessage.success('修改成功')
  }
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

table {
  table-layout: auto !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}
</style>
